'use client';

import { useState } from 'react';
import { 
  Settings,
  Bell,
  Mail,
  MessageSquare,
  Shield,
  Users,
  Clock,
  Save,
  X
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { FadeIn } from '@/components/ui/motion';
import { useToast } from '@/components/ui/use-toast';
import { Toaster } from 'sonner';
import { useAuth } from '@/hooks/use-auth';
import { UserRole } from '@/types';
import { Separator } from '@/components/ui/separator';

// 添加类型定义
type SettingsType = {
  notifications: Record<string, boolean>;
  security: Record<string, boolean>;
  system: Record<string, boolean>;
};

// 模拟数据
const mockSettings: SettingsType = {
  notifications: {
    enableEmailNotifications: true,
    enableSmsNotifications: false,
    enableSystemMessages: true,
    enableHomeworkReminders: true,
    enableAttendanceAlerts: true,
  },
  security: {
    enableTwoFactor: false,
    requirePasswordChange: true,
    enableLoginHistory: true,
    enableIpRestriction: false,
  },
  system: {
    enableMaintenance: false,
    enableDebugMode: false,
    enableAutoBackup: true,
    enableUserRegistration: true,
  }
};

export default function SettingsPage() {
  const { toast } = useToast();
  const { user } = useAuth();
  const isAdmin = user?.role === UserRole.ADMIN;
  
  const [settings, setSettings] = useState(mockSettings);
  const [isEditing, setIsEditing] = useState(false);
  const [editedSettings, setEditedSettings] = useState(mockSettings);
  
  // 处理设置更新
  const handleSave = () => {
    setSettings(editedSettings);
    setIsEditing(false);
    toast({
      title: "保存成功",
      description: "系统设置已更新",
    });
  };
  
  // 处理取消编辑
  const handleCancel = () => {
    setEditedSettings(settings);
    setIsEditing(false);
  };
  
  // 处理开关变化
  const handleToggle = (category: keyof SettingsType, setting: string) => {
    setEditedSettings(prev => ({
      ...prev,
      [category]: {
        ...prev[category],
        [setting]: !prev[category][setting]
      }
    }));
  };

  // 设置项组件
  const SettingItem = ({ 
    category, 
    setting, 
    label, 
    description 
  }: { 
    category: keyof SettingsType, 
    setting: string, 
    label: string, 
    description: string 
  }) => (
    <div className="flex items-center justify-between space-y-2">
      <div>
        <Label>{label}</Label>
        <p className="text-sm text-muted-foreground">{description}</p>
      </div>
      <Switch
        checked={editedSettings[category][setting]}
        onCheckedChange={() => handleToggle(category, setting)}
        disabled={!isEditing}
      />
    </div>
  );

  return (
    <FadeIn>
      <Toaster />
      <div className="container mx-auto py-6">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-2xl font-bold">系统设置</h1>
            <p className="text-muted-foreground">
              管理系统的基本设置和功能配置
            </p>
          </div>
          {isAdmin && (
            <div>
              {isEditing ? (
                <div className="flex space-x-2">
                  <Button variant="outline" onClick={handleCancel}>
                    <X className="h-4 w-4 mr-1" />
                    取消
                  </Button>
                  <Button onClick={handleSave}>
                    <Save className="h-4 w-4 mr-1" />
                    保存
                  </Button>
                </div>
              ) : (
                <Button onClick={() => setIsEditing(true)}>
                  <Settings className="h-4 w-4 mr-1" />
                  修改设置
                </Button>
              )}
            </div>
          )}
        </div>
        
        <div className="grid gap-6">
          {/* 通知设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5" />
                通知设置
              </CardTitle>
              <CardDescription>
                配置系统的通知和提醒功能
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <SettingItem
                category="notifications"
                setting="enableEmailNotifications"
                label="邮件通知"
                description="启用系统邮件通知功能"
              />
              <Separator />
              <SettingItem
                category="notifications"
                setting="enableSmsNotifications"
                label="短信通知"
                description="启用系统短信通知功能"
              />
              <Separator />
              <SettingItem
                category="notifications"
                setting="enableSystemMessages"
                label="系统消息"
                description="启用系统内部消息提醒"
              />
              <Separator />
              <SettingItem
                category="notifications"
                setting="enableHomeworkReminders"
                label="作业提醒"
                description="启用作业截止提醒功能"
              />
              <Separator />
              <SettingItem
                category="notifications"
                setting="enableAttendanceAlerts"
                label="考勤提醒"
                description="启用考勤异常提醒功能"
              />
            </CardContent>
          </Card>
          
          {/* 安全设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                安全设置
              </CardTitle>
              <CardDescription>
                配置系统的安全相关功能
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <SettingItem
                category="security"
                setting="enableTwoFactor"
                label="双因素认证"
                description="启用双因素身份认证功能"
              />
              <Separator />
              <SettingItem
                category="security"
                setting="requirePasswordChange"
                label="强制密码更新"
                description="要求用户定期更改密码"
              />
              <Separator />
              <SettingItem
                category="security"
                setting="enableLoginHistory"
                label="登录记录"
                description="记录用户登录历史"
              />
              <Separator />
              <SettingItem
                category="security"
                setting="enableIpRestriction"
                label="IP限制"
                description="启用IP地址访问限制"
              />
            </CardContent>
          </Card>
          
          {/* 系统设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="h-5 w-5" />
                系统设置
              </CardTitle>
              <CardDescription>
                配置系统的基本功能
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <SettingItem
                category="system"
                setting="enableMaintenance"
                label="维护模式"
                description="启用系统维护模式"
              />
              <Separator />
              <SettingItem
                category="system"
                setting="enableDebugMode"
                label="调试模式"
                description="启用系统调试功能"
              />
              <Separator />
              <SettingItem
                category="system"
                setting="enableAutoBackup"
                label="自动备份"
                description="启用系统自动备份功能"
              />
              <Separator />
              <SettingItem
                category="system"
                setting="enableUserRegistration"
                label="用户注册"
                description="允许新用户注册"
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </FadeIn>
  );
}
